<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<c:set value="${requestScope.response.data.list }" var="cateList" />
<!DOCTYPE HTML>
<html>
	<head>
		<%@ include file="/common/include/title.jsp"%>
		<link rel="stylesheet" href="${rootPath }/common/resource/H-ui.admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"
			type="text/css">
		<title>分类列表(树形) - 美妆产品销售系统</title>
	</head>
	<body>
		<nav class="breadcrumb">
			<i class="Hui-iconfont">&#xe67f;</i> 首页 
			<span class="c-gray en">&gt;</span> 系统管理 
			<span class="c-gray en">&gt;</span> 分类列表(树形) 
			<a class="btn btn-success radius r"
				style="line-height: 1.6em; margin-top: 3px"
				href="javascript:location.replace(location.href);" title="刷新"><i
				class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<c:if test="${param.roleId != null && param.roleId != ''}">
			角色:${roleTemp.name}
		</c:if>
		<table class="table">
			<tr>
				<td width="200" class="va-t">
					<input type="hidden" name="roleId" value="${param.roleId }">
					<ul id="treeDemo" class="ztree"></ul>
					<c:if test="${param.roleId != null && param.roleId != ''}">
						<a  class="btn btn-primary radius" onclick="return roleSubmit()">
							<i class="Hui-iconfont">&#xe632;</i> 提交
						</a>
					</c:if>
				</td>
				<td class="va-t">
					<!-- <iframe ID="testIframe" Name="testIframe"
						FRAMEBORDER=0 SCROLLING=AUTO width=100% height=390px
						SRC="product-category-add.html"></iframe> -->
				</td>
			</tr>
		</table> 
		<%@ include file="/common/include/footer.jsp" %>
		<!--请在下方写此页面业务相关的脚本-->
		<script type="text/javascript" src="${rootPath }/common/resource/H-ui.admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
		<script type="text/javascript">
			var setting = {
				view : {
					dblClickExpand : true,
					showLine : true,
					selectedMulti : true
				},
				data : {
					simpleData : {
						enable : true,
						idKey : "id",
						pIdKey : "pId",
						rootPId : ""
					}
				},
				<c:if test="${param.Id != null && param.Id != ''}">
					check: {
						enable: true,
						chkStyle: "checkbox",
					},
				</c:if>
				callback : {
					beforeClick : function(treeId, treeNode) {
						var zTree = $.fn.zTree.getZTreeObj("tree");
						if (treeNode.isParent) {
							zTree.expandNode(treeNode);
							return false;
						} else {
							demoIframe.attr("src", treeNode.file + ".html");
							return true;
						}
					}
				}
			};
			
			var zNodes = [
				<c:forEach items="${cateList}" var="pojoTemp" varStatus="stat">
					{
						id : ${pojoTemp.id},
						pId : ${pojoTemp.parentId},
						name : "${pojoTemp.name}",
						open : true,
						<c:if test="${param.Id != null && param.Id != ''}">
							checked : true,
						</c:if>
					},
				</c:forEach>
			];
			var code;
	
			function showCode(str) {
				if (!code)
					code = $("#code");
				code.empty();
				code.append("<li>" + str + "</li>");
			}
			
			var zTree ; 
			$(document).ready(function() {
				var t = $("#treeDemo");
				zTree = $.fn.zTree.init(t, setting, zNodes);
			});
			
			
		</script>
	</body>
</html>